<template>
  <div class="app-container">
    <search-bar :form="queryParams" @sub="getList"></search-bar>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button @click="handleAdd" class="Apply">新增盘点</el-button>
      </el-col>
      <right-toolbar :search="false" @queryTable="Refresh"></right-toolbar>
    </el-row>
    <vxe-table v-loading="tableData.loading" :data="tableData.list" :column-config="{resizable: true}" border stripe :row-config="{isHover: true}">
      <vxe-column field="state" title="状态" align="center" width="100">
        <template #default="{ row }">
          <apply-state-tag :value="row.state"></apply-state-tag>
        </template>
      </vxe-column>
      <vxe-column field="number" title="编号" width="160" show-overflow="ellipsis">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">{{row.number}}</el-button>
        </template>
      </vxe-column>
      <vxe-column field="title" title="标题" width="160" show-overflow="ellipsis">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleOperate(row)">{{row.title}}</el-button>
        </template>
      </vxe-column>
      <vxe-column field="num" title="应盘资产数" width="100"></vxe-column>
      <vxe-column field="createTime" title="创建时间" width="130"></vxe-column>
      <vxe-column field="createUserName" title="创建人" width="120"></vxe-column>
      <vxe-column field="managerName" title="盘点管理员" width="160"></vxe-column>
      <vxe-column field="result" title="盘点结果" width="80">
        <template #default="{row}">
          账实相符
        </template>
      </vxe-column>
      <vxe-column field="result" title="员工自主盘点" width="120">
        <template #default="{row}">
          {{showYesOrNo(row.employeeSelf)}}
        </template>
      </vxe-column>
      <vxe-column field="result" title="已盘资产修改内容自动更新资产信息" width="220">
        <template #default="{row}">
          {{showYesOrNo(row.pdAutoUpdate)}}
        </template>
      </vxe-column>
      <vxe-column field="result" title="管理员盘点时，允许直接选择资产" width="220">
        <template #default="{row}">
          {{showYesOrNo(row.managerChoose)}}
        </template>
      </vxe-column>
      <vxe-column field="createUserName" title="操作人" width="120"></vxe-column>
      <vxe-column field="remark" title="备注" width="120"></vxe-column>

      <vxe-column title="操作" align="center" width="120" fixed="right">
        <template #default="{ row }">
          <el-button style="margin-right: 10px;" link type="primary" size="small"
            v-if="row.state !== 2 && row.canHandle" @click="handleApproveDetail(row)">盘点</el-button>
          <el-button v-if="row.state !== 2 && row.canDelete" size="small" link type="primary"
                     @click="handleDelete(row)">审批详情</el-button>
          <el-button v-if="row.state !== 2 && row.canDelete" size="small" link type="primary"
            @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div class="pagination-container ">
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total" :page.sync="tableData.paging.pageNum" :limit.sync="tableData.paging.pageSize"
        @pagination="getList" />
    </div>

    <edit ref="edit" @sub="getList"></edit>
    <operate ref="operate" @sub="onOperateSub"></operate>
  </div>
</template>
  
<script setup>
import api from "./api.js";
import { getCurrentInstance } from 'vue'
import SearchBar from "./SearchBar.vue";
import Edit from './edit.vue'
import Operate from './operate.vue'
import {useRouter} from "vue-router";
import ApplyStateTag from "@/components/Workflow/ApplyStateTag.vue";

const {proxy} = getCurrentInstance();
const router = useRouter();

const tableData = reactive({
  // 遮罩层
  loading: true,
  list: [],
  paging: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
});

const edit = ref();

function getParams() {
  return {};
}

async function getList() {
  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;

  const query = getParams();
  const pageReq = {page: pageNum - 1, size: pageSize};
  await api.list(query, pageReq).then(response => {
    const { content, totalElements } = response;

    if (content && content.length > 0) {
      content.forEach(item => {
        if (item.formData) {
          let formData = JSON.parse(item.formData);
          Object.assign(item, formData);
        }
      });
    }


    tableData.list = content;

    tableData.paging.total = totalElements;
    tableData.loading = false;
  });
}

/** 新增按钮操作 */
function handleAdd() {
  edit.value.open();
}

onMounted(()=> {
  getList();
});

function handleOperate(row) {
  router.push({
    path: `/asset/inventory/inventory/${row.id}`
  });
}

function handleDetail(row) {

}

function handleStart(row) {
  api.start(row.id).then(()=> {
    getList();
  });
}

async function Refresh() {
  await getList();
  proxy.$message.success("刷新成功");
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除').then(function() {
    return api.del(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function showYesOrNo(val) {
  return val ? '是': '否';
}

</script>
    
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 92vh;
  padding: 9px;
  overflow: hidden;
}

.vxe-table {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.custom-table .vxe-header,
.custom-table .vxe-body {
  border-top: 1px solid #e4e7ed;
}

.custom-table .vxe-header {
  background-color: #f4f7fa;
  font-weight: 600;
  text-align: center;
}

.custom-table .vxe-column {
  padding: 8px 12px;
  text-align: center;
}

.custom-table .vxe-table .cell {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
}

.custom-table .vxe-column-header {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 500;
}

.custom-table .vxe-row:hover {
  background-color: #f5f7fa;
}

.custom-table .vxe-row.selected {
  background-color: #e8f4fe;
}

.Apply {
  width: 74px;
  height: 35px;
  background-color: #005bf5;
  color: #fff;
  font-size: 12px;
  border-radius: 8%;
  padding: 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.status-pending {
  color: #67c23a;
  font-weight: bold;
}

.status-in-progress {
  color: #409eff;
  font-weight: bold;
}

.status-completed {
  color: #67c23a;
  font-weight: bold;
}

.fixed-width {
  width: 120px;
}
</style>